<template>
	<div class="grid-container">
		<div class="search-form">
			<el-form :inline="true" :model="query">

			</el-form>
		</div>
		<div class="grid-content" id="">
				<div><textarea name="" id="" cols="30" rows="10"></textarea></div>
		</div>
	</div>
</template>

<script>
	import { fetchList} from "@/api/move_stock";

	export default {
		name: "rolelist",
		data() {
			return {
				query: {
					page: 1,
					limit: 20,
					warehouse_id: undefined,
					state_name: '',
					stock_no: "",
					CHARG: "",
					PRODCHINM: "",
					id: undefined,
					status: 2,
					sort: "id"
				},
				loading: true,
				tableData: [],
				wareHouseList: [],
				total: 0,
				goodsList: [],
				checked: [],
				dialogVisible: false,
				q: {
					limit: 10,
					page: 1
				}
			};
		},
		created() {
			this.loadData();
		},
		computed: {
			stockedList() {
				let offset = this.q.limit * (this.q.page - 1);
				return this.goodsList.slice(offset, offset + this.q.limit);
			}
		},
		methods: {
			loadData() {
				fetchList(this.query).then(res => {
					this.tableData = res.data.data;
				this.total = res.data.total;
			});
				this.loading = true;
				setTimeout(() => {
					this.loading = false;
			}, 1000);
			},
			doSeach() {
				this.query.page = 1;
				this.loadData();
			},
			doClear() {
				this.query.warehouse_id = "";
				this.query.CHARG = "";
				this.query.PRODCHINM = "";
			},
			handleQSizeChange: function(val) {
				this.q.limit = val;
			},
			handleQCurrentChange: function(val) {
				this.q.page = val;
			},
			handleSizeChange(val) {
				this.query.limit = val;
				this.loadData();
			},
			handleCurrentChange(val) {
				this.query.page = val;
				this.loadData();
			},
			showDetail(row) {
				this.query.id = row.id;
				getGoodsByProductId(this.query).then(res => {
					this.goodsList = res.data;
				this.dialogVisible = true;
			});
			},
			handleSelectionChange(val) {
				this.checked = val;
			},
			toShelf() {
				var product_ids = [];
				if (this.checked.length === 0) {
					this.$message({
						message: "请选择商品！",
						type: "warning"
					});
					return;
				}
				for (let i = 0; i < this.checked.length; i++) {
					product_ids.push(this.checked[i].id);
				}
				this.$router.push({
					path: "/instorage_action/instorage_process/detail",
					query: { product_ids: product_ids }
				});
			}
		}
	};
</script>
<style lang="less">
	.grid-container {
		height: auto;
		overflow: hidden;
	.action-column {
		text-align: right;
	}
	.color-gred {
		color: #999;
	}
	}
	.el-dialog--dl-small {
		width: 600px;
	}
	.warehouse-select {
		margin-right: 20px;
		margin-bottom: 20px;
	}
	.stock-item {
		display: block;
		margin: 10px 0;
	.stock-item-title {
		display: inline-block;
		width: 100px;
	}
	.el-input {
		width: 200px;
	}
	}
	.el-pagination {
		margin: 10px 0;
	}
</style>